<template>
	<view class="extract_wrapper">
		<view class="extract__top_wrap"></view>
		<view class="extract__header_wrapper">

			<view class="extract__asset_wrap">
				<view class="extract__asset_left">
					<view class="extract_title">可提币(PCD)</view>
					<view class="extract_count">{{$util.roundNumber(allExtractNumber,2)}}</view>
				</view>
				<view class="extract__asset_right">
					<view class="extract_title">提币中(PCD)</view>
					<view class="extract_count">{{$util.roundNumber(extractProcess,2)}}</view>
				</view>
			</view>

			<view class="extract_number--title">
				<text>提币数量：(最低提币数量为{{minExtractNumber}})</text>
				<text class="extract__btn_all" @click="onExtractAll">全部提币</text>
			</view>
			<view class="extract_number--count">
				<input type="text" placeholder-class="input-placeholder" v-model="extractNumber" placeholder="请输入提币数额" />
				<text class="extract_number--unit">PCD</text>
			</view>

			<view class="extract_number--title">
				<text>地址：</text>
			</view>
			<view class="extract_number--count">
				<input type="text" placeholder-class="input-placeholder" v-model="extractAddress" placeholder="请输入提现地址" />
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/wallet/scan.svg" class="scan_right " @click="onScanCode"></image>
			</view>

			<view class="extract_number--title">
				<text>到账数量：</text>
			</view>
			<view class="extract_number--count">
				<text class="actual_number">{{$util.roundNumber(actualNumber,2)}}</text>
				<text class="extract_number--unit">PCD</text>
			</view>
			<view class="service_charge">手续费(1%PCD)：{{$util.roundNumber(extractNumber * extractRates,2)}} PCD</view>
			<view class="extract_btn" @click="onExtractBtn">提币</view>
		</view>
		<view class="check_record" @click="jumpExtractRecord">查看提币记录</view>

		<wx-dialog :showDialog="showFundsPassDialog">
			<template v-slot:dialogContent>
				<view class="dialog_wrap">
					<view class="dialog_title">确认资金密码</view>
					<view class="dialog_content">
						<input type="password" v-model="fondsPassword" placeholder="资金密码" />
						<text @click="resetFundsPass">重置资金密码</text>
					</view>
					<button type="warn" class="dialog_btn" @click="onFundsPassDialog('confirm')">确认</button>
					<button class="dialog_btn cancel_btn" @click="onFundsPassDialog('cancel')">取消</button>
				</view>
			</template>
		</wx-dialog>
	</view>
</template>

<script>
	import wxDialog from "@/components/wx-dialog/wx-dialog.vue"
	export default {
		data() {
			return {
				showFundsPassDialog: false,
				fondsPassword: '', 			// 资金密码
				extractAddress: '', 		// 提取地址
				extractNumber: '', 			// 提取数量
				extractRates: 0, 			// 手续费利率min
				allExtractNumber: 0, 		// 可提币
				extractProcess: 0, 			// 提币中数量
				minExtractNumber: 0 		// 最少提币数量
			}
		},
		onReady() {
			this.getRates();
		},
		onPullDownRefresh() {
			this.getRates();
		},
		computed: {
			// 到账数量
			actualNumber() {
				return this.extractNumber - (this.extractNumber * this.extractRates)
			}
		},
		methods: {
			// 资金密码对话框
			onFundsPassDialog(arg) {
				if (arg === 'confirm') {
					if (this.fondsPassword === '') {
						uni.showToast({
							title: '资金密码不能为空',
							icon: 'none'
						})
						return
					}
					this.$api.verifyFundsPass({
						password: this.fondsPassword
					}, res => {
						if (res.data.type === "ok") {
							this.onExtractRequest()
						} else {
							uni.showToast({
								title: '资金密码有误',
								icon: 'none'
							})
						}
					})
				} else {
					this.showFundsPassDialog = false
				}
				this.fondsPassword = ''
			},

			// 发送提币请求
			onExtractRequest() {
				uni.showLoading();
				this.$api.onExtract({
					number: this.extractNumber,
					address: this.extractAddress
				}, res => {
					if (res.data.type === "ok") {
						this.extractAddress = ''
						this.extractNumber = ''
						this.showFundsPassDialog = false
						this.getRates();
					}
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					})
					uni.hideLoading();
				})
			},

			// 扫描二维码
			onScanCode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: res => {
						this.extractAddress = res.result;
					}
				});
			},

			// 监听提取全部按钮
			onExtractAll() {
				this.extractNumber = Math.floor(this.allExtractNumber)
			},

			// 利率和可提币
			getRates() {
				this.$api.getRates({}, res => {
					uni.stopPullDownRefresh()
					if (res.data.type == 'ok') {
						let result = res.data.message
						// 利率
						this.extractRates = result.rate
						// 可提币
						this.allExtractNumber = result.get_amount
						// 提币中数量
						this.extractProcess = result.get_amount_ing
						// 最少提币数量
						this.minExtractNumber = result.mini_post_coins
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},

			// 提币操作
			onExtractBtn() {
				if (!this.extractAddress) {
					uni.showToast({
						title: '请输入提币地址',
						icon: 'none'
					})
					return
				};
				if (parseFloat(this.extractNumber) > parseFloat(this.allExtractNumber)) {
					uni.showToast({
						title: '可提币数量不足',
						icon: 'none'
					})
					return
				};
				if (parseInt(this.extractNumber) != parseFloat(this.extractNumber)) {
					uni.showToast({
						title: '提币数必须为整数',
						icon: 'none'
					})
					return
				};
				if (parseInt(this.extractNumber) < parseInt(this.minExtractNumber)) {
					uni.showToast({
						title: '不能小于最低提币数',
						icon: 'none'
					})
					return
				};
				this.$api.onExtract({}, res => {
					if (res.data.type == 'error') {
						this.showFundsPassDialog = true
					}
				})
			},

			// 跳转提币记录
			jumpExtractRecord() {
				uni.navigateTo({
					url: '/pages/wallet/extractRecord'
				})
			},

			// 重置资金密码
			resetFundsPass() {
				uni.showToast({
					title: "请联系客服重置密码",
					icon: 'none'
				})
			}
		},
		components: {
			wxDialog
		}
	}
</script>

<style lang="scss" scoped>

	.extract_wrapper {}

	.extract__top_wrap{
		height:120upx;
		background-color: #25263D;
	}

	.extract__header_wrapper {
		height: 1026upx;
		width: 92%;
		margin:-100upx auto 0 auto;
		background:rgba(255,255,255,1);
		box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.08);
		border-radius:10upx;
		overflow: hidden;
		.extract__asset_wrap {
				position: relative;
				height: 100upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top:70upx;
				.extract__asset_left,
				.extract__asset_right {
					width: 50%;
					text-align: center;

					.extract_title {
						font-size: 12px;
						color: #999999;
					}

					.extract_count {
						font-size: 18px;
					}
				}
				.extract__asset_left{
					position: relative;
				}
				.extract__asset_left:after{
					@include border__line_bgwhite--right;
				}
			}
		.extract__asset_wrap:after{
			content:"";
			position:absolute;
			bottom:-20upx;
			left:6%;
			right:0;
			border-bottom:2px solid #F5F5F5;
			-webkit-transform:scaleX(.95);
			-webkit-transform-origin:0 0;
		}

		.extract__header_wrap {
			height:656upx;
			width:92%;
			margin:-100upx auto 0 auto;
			box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.08);
			border-radius:10upx;
			background-color:#FFFFFF;
			overflow: hidden;
			
		}

		.extract_number--title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20upx 40upx;
			margin-top: 50upx;
			font-size: 13px;

			.extract__btn_all {
				color: #E13E4D;
			}
		}

		.extract_number--count {
			position: relative;
			padding: 0 40upx;

			input,
			.actual_number {
				position:relative;
				display: block;
				height: 60upx;
				font-size: 13px;
				margin-bottom: 10upx;
			}
			input:after{
			    @include border__line_bgwhite--bottom;
			}

			.actual_number:after{
			    @include border__line_bgwhite--bottom;
			}
			
			.extract_number--unit {
				position: absolute;
				top: 0;
				right: 40upx;
				font-size: 18px;
			}

			image {
				position: absolute;
				top: 10upx;
				right: 40upx;
				z-index: 999;
				width: 40upx;
				height: 40upx;
			}
		}

		.service_charge {
			margin-left:40upx;
			margin-top: 21upx;
			font-size: 10px;
		}

		.extract_btn {
			width: 80%;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			background-color: #E13E4D;
			border-radius: 80upx;
			margin: 121upx auto 0 auto;
			font-size: 18px;
			color: #FFFFFF;
		}
	}

	.check_record {
		width: 25%;
		margin: 50upx auto;
		text-align: center;
		border-bottom: 1px solid #E03E4D;
		color: #E03E4D;
		font-size: 13px;
	}


	.dialog_wrap {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
		border-radius: 20upx 20upx 0 0;

		.dialog_title {
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #E0DFDF;
			color: #666666;
			font-size: 15px;
		}

		.dialog_content {
			display: flex;
			justify-content: space-between;
			padding: 0 40upx;
			margin: 60upx 0;

			input {
				flex: 1;
				height: 50upx;
				padding: 0 10upx;
				border-bottom: 1px solid #E0DFDF;
				text-align: center;
			}

			text {
				padding: 10upx 30upx;
				background-color: #E03E4D;
				color: #FFFFFF;
				border-radius: 40upx;
			}

		}

		.dialog_btn {
			width: 90%;
			height: 70upx;
			line-height: 70upx;
			margin: 20upx auto;
			border-radius: 10upx;
			background-color: #E03E4D;
			font-size: 14px;
		}

		.cancel_btn {
			border: 1px solid #E03E4D;
			background-color: #FFFFFF;
			color: #E03E4D;
		}
	}
</style>
